/* ===== 1. Base / Global Resets ===== */
* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* Stops horizontal screen leakage completely */
  margin: 0;
  padding: 0;
  background: white;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: lightgreen;
}

img {
  max-width: 100%;
  height: auto;
}

/* ===== 2. Header / Navigation ===== */
header {
  display: flex;                 
  justify-content: space-between; 
  align-items: center;         
  background: rgb(216, 191, 216);       
  padding: 20px 20px;
}

header a {
  color: black;
  text-decoration: none;
  margin: 0 10px;
  font-weight: bold;
}

header a:active {
  color: green;                  
}

header a:hover {
  color: lightgreen;
}

.logo {
  height: 120px;   
  width: auto;   
}

/* ===== 3. Layout Sections ===== */
section {
  display: block;   
  background-color: rgb(75, 159, 75);
}

/* ===== 4. Slideshow Area ===== */
.slideshow {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: slideShow 16s infinite;
}

.slideshow img:nth-child(1) { animation-delay: 0s; }
.slideshow img:nth-child(2) { animation-delay: 4s; }
.slideshow img:nth-child(3) { animation-delay: 8s; }
.slideshow img:nth-child(4) { animation-delay: 12s; }

@keyframes slideShow {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}

.slideshow-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #ffffff;
  width: 90%; 
}


.caption-title {
  font-size: 36px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 0 10px 0; 
}

.caption-subtitle, .slideshow-caption p {
  font-size: 22px;
  font-style: italic;
  letter-spacing: 1px;
  margin: 0;
  color: #ffffff !important;
}


.slideshow-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 30px;
  background-color: #2e7d32; 
  color: #ffffff;            
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.slideshow-btn:hover {
  background-color: #1b5e20; 
  transform: translateY(-2px);           
}

/* ===== 5. Programs Component ===== */
.programs {
  padding: 40px;
  background-color: #e6f4e6; 
  text-align: center;
}

.programs h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #2a4d2a;
}

.programs-gallery {
  display: flex;
  flex-direction: row;
  justify-content: space-around; 
  gap: 30px;                     
  flex-wrap: wrap;             
  margin: 0 auto;                
  max-width: 1200px;             
  width: 100%;
}

.program-card {
  width: 220px;
  text-align: center;
}

.program-card img {
  width: 100%;
  height: 150px;         
  object-fit: cover;     
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.program-card a img {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.program-card a:hover img {
  transform: scale(1.03);
  opacity: 0.9;
}

.program-card p {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

/* ===== 6. About Us Component ===== */
.aboutus-section-wrapper {
  width: 100%;
  padding: 60px 40px;
  background-color: #ffffff;
}

.aboutus-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.aboutus-col-left {
  width: 55%;
  text-align: left;
}

.aboutus-col-left h2 {
  font-size: 36px;
  color: #000000;
  margin: 0 0 20px 0;
}

.aboutus-col-left p {
  font-size: 16px;
  line-height: 1.6;
  color: #000000;
  margin: 0 0 15px 0;
}

.aboutus-col-right {
  width: 40%;
  display: flex;
  justify-content: flex-end;
}

.aboutus-col-right img {
  width: 100%;
  max-width: 400px;
  height: 320px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.read-more-btn {
  display: inline-block;
  margin-top: 25px;            
  padding: 12px 28px;          
  background-color: #2e7d32;   
  color: #ffffff;   
  text-decoration: none;       
  font-weight: bold;           
  text-transform: uppercase;   
  font-size: 14px;             
  letter-spacing: 0.5px;       
  border-radius: 4px;          
  box-shadow: 0 2px 5px rgba(0,0,0,0.15); 
  transition: all 0.3s ease;   
}

.read-more-btn:hover {
  background-color: #1b5e20;   
  box-shadow: 0 4px 8px rgba(0,0,0,0.25); 
  transform: translateY(-2px); 
}

/* ===== 7. Footer Component (Fixed & Re-structured) ===== */
.site-footer {
  background-color: #1a4329;
  color: #e0e0e0 !important;
  width: 100%; 
  padding: 60px 40px 30px;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto; 
  display: flex;
  flex-direction: row;
  justify-content: space-between; 
  align-items: flex-start;
  gap: 30px;
  width: 100%;
}

/* Individual Footer Column Structural Formatting */
.footer-col {
  flex: 1;
  min-width: 200px;
  text-align: left;
}

/* Fixes titles */
.footer-col h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #ffffff !important;
  border-bottom: 2px solid #ffffff33; 
  padding-bottom: 8px;
}

/* Fixes the motto, email, phone, and location layout spacing cleanly */
.footer-col p, 
.footer-col div, 
.footer-col span {
  font-size: 14px;
  line-height: 1.6;
  color: #e0e0e0 !important;
  margin: 8px 0 !important;
  display: block !important; /* Forces items like the location text to stay on their own clean line */
}

/* Quick Links formatting block */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px;
  display: inline-block;
}

.footer-links a:hover {
  color: lightgreen !important;
}

.footer-social-icons {
  display: flex;          /* puts them in a row */
  flex-direction: row;    /* ensures horizontal layout */
  gap: 14px;              /* spacing between icons */
  margin-top: 15px;
  justify-content: center; /* center them in the footer */
}

.footer-social-icons a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.footer-social-icons a:hover {
  transform: scale(1.15);
  background-color: #555;
}

.footer-social-icons i {
  font-size: 18px;
}

/* ===== 9. Clean Divider Line & Centered Copyright ===== */

/* Creates a single, clean visual separation line above the copyright text */
.footer-divider-line {
  border: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2) !important;
  max-width: 1200px;
  margin: 40px auto 20px auto !important;
  display: block !important;
}

/* Formats the absolute bottom copyright text section */
.footer-bottom-text {
  font-size: 13px;
  color: #b0b0b0 !important;
  text-align: center !important;
  line-height: 1.6;
  margin: 0 auto !important;
  display: block !important;
}

.footer-bottom-text strong, 
.footer-bottom-text span {
  color: #ffffff !important;
  display: inline !important; /* Keeps name details inline on the same row */
}


/* ==========================================
   ===== 8. MOBILE RESPONSIVE MEDIA QUERIES ===
   ========================================== */

/* Tablet Screens (Landscape & Portrait) */
@media (max-width: 992px) {
  .caption-title { font-size: 28px; }
  .caption-subtitle, .slideshow-caption p { font-size: 18px; }
  .slideshow { height: 320px; }

  .aboutus-row { flex-direction: column; }
  .aboutus-col-left, .aboutus-col-right { width: 100%; text-align: center; }
  .aboutus-col-right { justify-content: center; margin-top: 30px; }
  
  .footer-container { flex-direction: column; align-items: center; }
  .footer-col { text-align: center; width: 100%; }
}

/* Mobile Screens (Phones) */
@media (max-width: 576px) {
  header { flex-direction: column; text-align: center; }
  header a { 
    margin: 10px 0; 
    padding: 10px 0; 
    display: inline-block; 
    width: 100%; 
  }

  .slideshow { height: 240px; }
  .caption-title { 
    font-size: 22px; 
    white-space: normal; /* Allows text to wrap normally on small mobile widths */
  }
  .caption-subtitle, .slideshow-caption p { font-size: 14px; }

  .programs-gallery { flex-direction: column; align-items: center; gap: 20px; }
  .program-card { width: 100%; max-width: 280px; }

  .aboutus-section-wrapper { padding: 30px 20px; }
  .aboutus-col-left h2 { font-size: 24px; }
  .aboutus-col-left p { font-size: 14px; }
}


/* ===== 1. Base Reset & Structure ===== */
body {
  margin: 0;
  padding: 0;
}

#programs-page {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

#programs-page .program-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 80px 4% !important; 
  background-color: #ffffff; 
}

/* ===== 2. Desktop Columns Arrangement ===== */
#programs-page .section-text {
  flex: 1.2;                 
  max-width: 100% !important; 
  padding-right: 50px;       
}

#programs-page .program-section img {
  flex: 1;
  width: 100% !important;
  max-width: 550px !important;  
  height: 400px !important;     
  object-fit: cover !important; 
  border-radius: 8px !important; 
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); 
}

/* Alternating/Flipped row layout rules for desktop */
#programs-page .flipped-section {
  flex-direction: row-reverse;
}

#programs-page .flipped-section .section-text {
  padding-right: 0;   
  padding-left: 40px;  
}

/* ===== 3. Typography & Buttons ===== */
#programs-page .section-text h2 {
  font-size: 42px; 
  font-family: sans-serif;
  font-weight: bold;
  color: #111111;
  margin: 0 0 24px 0;
}

#programs-page .section-text p {
  font-size: 1.1rem !important; 
  line-height: 1.7 !important;   
  color: #444444;               
  margin-bottom: 25px;
}

#programs-page .read-more-btn {
  display: inline-block;
  background-color: #22702e; 
  color: #ffffff;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.5px;
  padding: 14px 32px;
  border-radius: 4px; 
  margin-top: 15px;
  transition: background-color 0.2s ease;
}

#programs-page .read-more-btn:hover {
  background-color: #164f1f; 
}
/* ==========================================
   ===== 4. RESPONSIVE MOBILE MEDIA QUERY ===== 
   ========================================== */
@media (max-width: 768px) {
  
  /* 1. Force the main outer section to stack vertically */
  #programs-page .program-section,
  #programs-page .flipped-section {
    display: flex !important;
    flex-direction: column !important; 
    padding: 40px 20px !important;
    text-align: center !important;
    gap: 20px !important; /* Adds clear natural breathing space between all elements */
  }

  /* 2. Reset the text column container layout elements */
  #programs-page .section-text {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    order: 1 !important; 
  }

  /* 3. Spacing for Typography elements */
  #programs-page .section-text h2 {
    font-size: 32px !important;
    margin-bottom: 15px !important;
    order: 1 !important;
  }

  #programs-page .section-text p {
    font-size: 1rem !important;
    margin-bottom: 20px !important; /* Creates clean gap below the paragraph text */
    order: 2 !important;
  }

  /* 4. Target the outer image and force clear separation */
  #programs-page .program-section img {
    width: 100% !important;
    max-width: 100% !important;
    height: 250px !important; /* Forces the image to shrink smaller so it does not overflow */
    object-fit: cover !important;
    margin: 15px 0 !important; /* Clean positive padding margins top and bottom—NO NEGATIVES */
    order: 2 !important; 
  }

  /* 5. Places the action button safely at the absolute bottom with space */
  #programs-page .read-more-btn {
    order: 3 !important; 
    margin-top: 10px !important; 
    width: auto !important;
  }
}

/* ==========================================================================
   ===== ABOUT SECTION COMPONENTS (Clean & Re-structured) =====
   ========================================================================== */

/* Main Container Wrappers */
.about-section {
  width: 100%;
  max-width: 100% !important; 
  margin: 0 auto;               
  padding: 0;                   
  font-family: 'Poppins', sans-serif;
  color: #ffffff;
}

.who-we-are-container {
  display: block;
  width: 100%;
  max-width: 100% !important; 
  margin: 0 !important;         
  padding: 60px 4% !important;  
  box-sizing: border-box;
  background-color: #0d3612;   
  color: #ffffff;
  border-radius: 0px !important; 
}

.who-we-are-container h2 {
  font-size: 28px;
  border-bottom: 2px solid #a3e635;
  padding-bottom: 8px;
  margin-top: 0;
}

.intro-p {
  display: block !important;
  width: 100% !important;
  text-align: justify;
  line-height: 1.6;
  font-size: 16px;
  color: #ffffff !important; 
}

/* Three Pillars / Foundation Grid */
.foundation-grid {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: stretch !important;    
  gap: 25px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 40px auto !important;
  box-sizing: border-box !important;
}

.foundation-card {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important; 
  background-color: #07220b !important;
  padding: 35px 25px !important;       
  border-radius: 10px !important;
  border: 1px solid #144f1c !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  text-align: center !important;
  box-sizing: border-box !important;
  height: auto !important;             
}

.foundation-card h3 {
  color: #a3e635 !important;
  font-size: 22px !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;     
}

.foundation-card p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: auto 0 !important;           
  color: #f1f5f9 !important;
}

/* Impact Indicators list block */
.impact-section {
  display: block !important;
  width: 100% !important;
  clear: both !important;
  margin-top: 40px !important;
  padding-top: 20px !important;
}

.impact-section h3 {
  font-size: 24px !important;
  color: #ffffff !important;
  margin-bottom: 25px !important;
  border-bottom: 2px solid #a3e635 !important;
  padding-bottom: 8px !important;
  display: inline-block !important;
}

.impact-list {
  list-style: none !important; 
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important; 
  gap: 16px !important; 
}

.impact-list li {
  display: block !important;
  width: 100% !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  color: #f1f5f9 !important;
  background: rgba(255, 255, 255, 0.04) !important; 
  padding: 16px 20px !important;
  border-radius: 6px !important;
  border-left: 4px solid #a3e635 !important; 
  box-sizing: border-box !important;
}

.impact-list strong {
  color: #a3e635 !important;
  font-size: 16.5px !important;
  margin-right: 6px !important;
}

/* ===== TEAM MEMBERS BLOCK ===== */
.members-section-white {
  background-color: #ffffff !important; 
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  padding: 60px 5% !important;
  box-sizing: border-box !important;
  clear: both !important;
}

.section-title {
  font-size: 2.2rem;
  color: #333333;
  margin-top: 0;
  margin-bottom: 45px;
}

.members-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* Standard 3 columns for desktop */
  gap: 30px !important;
  width: 100% !important;
  align-items: start !important;
}

.member-card {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  background-color: #f9f9f9 !important; 
  border: 1px solid #e0e0e0 !important;
  padding: 25px 20px !important;
  border-radius: 8px !important;
}

.member-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
  border: 2px solid #1b7339; 
}

.member-card h3 {
  margin: 10px 0 4px 0;
  font-size: 1.25rem;
  color: #333333;
}

.member-role {
  color: #1b7339;
  font-weight: bold;
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.member-desc {
  color: #666666;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ==========================================================================
   ===== RESPONSIVE BREAKPOINT ENGNE FOR ABOUT PAGE =====
   ========================================================================== */
@media (max-width: 850px) {
  /* 1. Stacks the 3 foundation cards vertically */
  .foundation-grid {
    flex-direction: column !important; 
    gap: 16px !important;
  }
  
  /* 2. Re-orders the team profile tiles into 1 fluid mobile layout row */
  .members-grid {
    grid-template-columns: 1fr !important; /* Disassembles horizontal line rendering completely */
    gap: 24px !important;                 
    justify-items: center !important;     
  }

  /* 3. Seals and centers profile cards without horizontal side leakage */
  .member-card {
    width: 100% !important;
    max-width: 300px !important; 
    text-align: center !important;
    margin: 0 auto !important;
  }

  /* 4. Centers the main heading typography elements */
  .section-title {
    text-align: center !important;
    font-size: 1.8rem !important;
    margin-bottom: 30px !important;
  }
}

/* ==========================================================================
   ===== ARCHIVE PAGE COMPONENTS (Clean & Re-structured) =====
   ========================================================================== */

/* Main wrapper layout for the entire archive timeline */
.archive-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
}

/* Wipes out the green box background completely */
.photo-section {
  background-color: transparent !important; /* Removed green box background */
  padding: 20px 0 !important;              /* Clean layout padding alignment */
  margin-bottom: 50px; 
}

/* Formats the section title to look sharp against your light page background */
.photo-section .section-title {
  color: #222222 !important; /* Dark color for visibility */
  font-size: 32px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 12px;       /* Tight spacing directly above your separator line */
  text-align: left;
}

/* Generates a clean horizontal separator line directly underneath the title */
.photo-section .section-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: rgb(75, 159, 75); /* Your theme green color for the line */
  margin-top: 12px;                  /* Visual gap between text and line */
}

/* Organizes your images into a 4-column desktop layout grid */
.photo-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important; 
  gap: 20px !important; /* Uniform gutters between photos */
  width: 100%;
  margin-top: 30px !important; /* Adds clear separation space below your new line */
}

/* Forces all images to scale down to fit the narrower 4-column slots */
.photo-grid img {
  width: 100% !important;
  height: 190px !important; /* Balanced height for 4 columns */
  object-fit: cover !important; 
  border-radius: 8px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

/* Subtle magnifying animation effect when hovering your mouse over an image */
.photo-grid img:hover {
  transform: scale(1.03);
}

/* ==========================================================================
   ===== ARCHIVE RESPONSIVE MEDIA BREAKPOINTS =====
   ========================================================================== */

/* Tablet Optimization Viewports */
@media (max-width: 992px) {
  .photo-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* Drops to 2 grid columns */
    gap: 15px !important;
  }
}

/* Mobile Phone Optimization Viewports */
@media (max-width: 576px) {
  .photo-section {
    padding: 20px 0 !important;
    text-align: center !important;
  }
  
  .photo-section .section-title {
    text-align: center !important; /* Centers headings on mobile layouts */
    font-size: 26px;
  }

  /* Centers the separator line under the text on mobile layouts */
  .photo-section .section-title::after {
    margin: 12px auto 0 auto;
  }

  .photo-grid {
    grid-template-columns: 1fr !important; /* Collapses to 1 single clean mobile column */
    gap: 15px !important;
  }

  .photo-grid img {
    height: 220px !important; 
  }
}

/* ==========================================================================
   ===== CONTACT COMPONENT STYLES (Split Card Layout) =====
   ========================================================================== */

/* 1. Outer Section Setup */
.contact-section {
  background-color: transparent !important;
  padding: 60px 4% !important; 
  width: 100% !important;
  box-sizing: border-box !important;
}

.contact-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Header styling inside the white card */
.contact-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 30px !important; 
  text-align: left !important;
  width: 100% !important;
}

.contact-title {
  color: #111111 !important;
  font-size: 36px !important;
  font-weight: bold !important;
  margin: 0 !important;
  text-align: left !important;
}

.contact-subtitle {
  color: #555555 !important;
  font-size: 15px !important;
  margin: 0 !important;
  text-align: left !important;
  line-height: 1.5 !important;
}

/* 2. Main Flexible Row Wrapper */
.contact-main-card {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;     /* THE FIX: Vertically centers the right side against the card */
  background: transparent !important;  
  padding: 0 !important;               
  box-shadow: none !important;         
  gap: 50px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 3. Left Side: Form Container (Now explicitly Styled as the Main White Card) */
.contact-form {
  flex: 1.6 !important;               
  display: flex !important;
  flex-direction: column !important;
  gap: 25px !important;
  width: 100% !important;
  
  /* THE FIX: Form sits elegantly inside its own dedicated white container box */
  background: #ffffff !important;
  padding: 40px !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
}

.form-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 20px !important;
  width: 100% !important;
}

.form-group, .message-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

.form-group {
  flex: 1 !important;                 
}

.form-group label, .message-container label {
  font-weight: bold !important;
  font-size: 15px !important;
  color: #111111 !important;          
  text-align: left !important;
}

.form-group input, .message-container textarea {
  width: 100% !important;
  padding: 16px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;     
  box-sizing: border-box !important;
  font-size: 15px !important;
  color: #333333 !important;
  background-color: #ffffff !important;
}

.message-container textarea {
  height: 180px !important;           
  resize: none !important;
}

.button-container {
  width: 100% !important;
}

.submit-btn {
  width: 100% !important;
  background-color: #1b4322 !important; 
  color: #ffffff !important;
  border: none !important;
  border-radius: 25px !important;       
  font-size: 16px !important;
  font-weight: bold !important;
  padding: 16px 0 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.submit-btn:hover {
  background-color: #133018 !important; 
}

/* 4. Right Side: Flat Independent Sidebar Cards */
.contact-info-container {
  flex: 1 !important;                  
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* Ensures the interior cards stay tightly grouped and centered */
  gap: 20px !important;
}

/* Keep this exactly as it was before to maintain baseline alignment of text lines */
.info-card {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-end !important;   
  background: transparent !important;   
  border: none !important;              
  border-bottom: 1px solid #e2e8f0 !important; 
  padding: 16px 0 !important;           
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 15px !important;
}

/* Keeps text flowing nicely aligned with baseline styling elements */
.info-value {
  font-size: 15px !important;
  color: #64748b !important;          
  text-align: right !important;
  line-height: 1 !important;          /* Restricts line heights from shifting text up */
}


/* Removes the underline separation mark on the last item (Location) */
.info-card:last-of-type {
  border-bottom: none !important;
}

.info-label {
  font-weight: bold !important;
  font-size: 16px !important;
  color: #111111 !important;          
  flex-shrink: 0 !important; 
}

/* ==========================================================================
   ===== 5. RESPONSIVE CONTACT MOBILE MEDIA BREAKPOINTS =====
   ========================================================================== */
@media (max-width: 868px) {
  .contact-main-card {
    flex-direction: column !important;
    gap: 40px !important;
  }

  .contact-form {
    padding: 30px 20px !important; /* Forms preserve internal card shape styling cleanly on phones */
  }

  .form-row {
    flex-direction: column !important;
    gap: 25px !important;
  }

  .contact-info-container {
    width: 100% !important;
    margin-top: 10px !important;
    padding: 0 10px !important;
  }

  .info-card {
    flex-direction: column !important; 
    align-items: flex-start !important; 
    padding: 16px 0 !important;
    gap: 6px !important;
  }

  .info-value {
    text-align: left !important; 
  }
}


/* --- Get Involved Page Styles --- */

/* 1. Forces the main body page container to utilize the full screen width */
.gi-page-container, 
main, 
#getInvolved-page {
    width: 100% !important;
    max-width: 95% !important; /* Forces layout to expand cleanly to the right edge */
    margin: 0 auto !important;  /* Centers the whole page perfectly on desktop screens */
    padding-left: 20px !important;
    padding-right: 20px !important; /* Keeps balanced safety margins on both flanks */
    box-sizing: border-box !important;
}
/* Forces the top header text section to spread across the full width */
.gi-header-section {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left; /* Aligns header text beautifully with the cards */
    margin-bottom: 32px;
    box-sizing: border-box;
    display: block !important; /* Prevents text from forcing into a narrow column */
}

.gi-header-section h2 {
    font-size: 28px;
    color: #1c4d3e; 
    margin-bottom: 12px;
    width: 100%;
}

.gi-header-section p {
    font-size: 16px;
    color: #333333;
    line-height: 1.6;
    width: 100% !important; /* Forces the text sentences to expand horizontally */
    max-width: 100% !important;
}

/* Container forcing cards to stack vertically and stretch wide */
.gi-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* Individual card blocks designed like your form inputs */
.gi-box-card {
    background-color: #ffffff;
    border: 1px solid #767676; /* Matches name input border */
    border-radius: 4px;        /* Matches name input corners */
    padding: 24px;
    box-sizing: border-box;
    width: 100%;               /* Spreads fully across the container space */
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* Left-aligns inner content elements */
}

.gi-box-title {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    margin: 0 0 10px 0;
}

.gi-box-text {
    font-size: 15px;
    color: #333333;
    line-height: 1.5;
    margin: 0 0 16px 0;
}

/* Payment list styling */
.gi-payment-list {
    font-size: 15px;
    color: #000000;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Button matching your themed dark green send button */
.gi-box-button {
    display: inline-block;
    background-color: #1c4d3e; 
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.gi-box-button:hover {
    background-color: #14372c;
}
/* 1. PARENT ROW CONTAINER - Forces the cards to sit side-by-side */
.donation-package-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Prevents cards from breaking to a new line */
    justify-content: space-between !important;
    align-items: stretch !important; /* FORCES ALL CARDS TO MATCH HEIGHT PERFECTLY */
    gap: 25px !important;            /* Adds a clean gap between each card */
    width: 100% !important;
    margin: 40px auto !important;
    box-sizing: border-box !important;
}

/* 2. CARD CONTAINER BOX - Turns each box into a vertical column structure */
.donation-card {
    flex: 1 1 33% !important;        /* Distributes width evenly between the 3 cards */
    display: flex !important;
    flex-direction: column !important; /* Stacks text vertically inside the card */
    justify-content: flex-start !important;
    align-items: center !important;    /* Centers text content inside the card */
    text-align: center !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
}

/* Typography alignment spacing for the paragraph content inside the cards */
.donation-card p {
    color: #4a5568 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

/* 3. BUTTON STYLING - Forces them to lock onto the same base row level */
.gi-card-btn {
    display: block !important;
    width: 100% !important;
    max-width: 220px !important;
    text-align: center !important;
    background-color:green !important; /* Solid green background matching your layout */
    color: #ffffff !important;
    padding: 12px 0 !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    cursor: pointer;
    margin-top: auto !important; /* 👈 KEY FLEX RULE: Pushes the button to the absolute bottom of the card */
}

/* Adding a quick sleek hover effect for interactivity */
.gi-card-btn:hover {
    background-color: #22543d !important; /* Darker green on hover */
    transition: background 0.2s ease-in-out;
}

/* ==========================================================================*/
/* 1. Main row container - makes cards sit side-by-side and equal height */
.gi-payment-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: stretch !important; /* Forces cards to have the exact same height */
    gap: 30px !important;
    width: 100% !important;
}

/* 2. Card layout - forces everything inside to align to the left wall */
.gi-pay-card {
    flex: 1 1 45% !important; /* Keeps cards identical in base width layout */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important; /* Forces buttons/inner blocks left */
    text-align: left !important;        /* Forces all text items left */
    background: #fff;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    box-sizing: border-box !important;
}

/* 3. Text content block - expands to push button to the bottom */
.gi-card-inner {
    text-align: left !important;
    align-items: flex-start !important;
    width: 100% !important;
    flex-grow: 1 !important;
}

/* 4. Details list - stacks the text pieces vertically on the left */
.gi-card-details-inline {
    display: flex !important;
    flex-direction: column !important; /* Changes row layout to vertical list stacking */
    align-items: flex-start !important;
    text-align: left !important;
    gap: 8px !important;
    width: 100% !important;
}

/* 5. Text elements - makes each line span full width to guarantee left-alignment */
.gi-card-row {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    font-size: 15px;
    color: #2d3748;
}

/* 6. Subtitle placement */
.gi-card-meta {
    text-align: left !important;
    margin-top: 20px !important;
    display: block !important;
    width: 100% !important;
}

.gi-card-btn {
    display: inline-block !important;
    width: 220px !important;
    text-align: center !important; 
    text-decoration: none !important; /* 👈 ADD THIS LINE TO REMOVE THE UNDERLINE */
    padding: 12px 0;
    border-radius: 6px;
    font-weight: bold;
    margin-top: auto !important;   
}


.gi-mpesa { border-top: 6px solid #48a442; }
.gi-paypal { border-top: 6px solid #003087; }

.gi-card-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px 0;
}

.gi-card-row {
  font-size: 15px;
  color: #2d3748;
}

.gi-card-meta {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #718096;
  margin-bottom: 25px;
}

.gi-btn-paypal {
    background-color: #003087 !important; /* Official PayPal Deep Blue */
    color: #ffffff !important;
}

/* Optional hover color effect */
.gi-btn-paypal:hover {
    background-color: #002266 !important; /* Darker blue on hover */
}

.gi-card-inner {
  text-align: left;      /* force all text left-aligned */
  width: 100%;
}

.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
}

.merch-form label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

.merch-form input, .merch-form select {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-btn {
  margin-top: 15px;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

.form-btn {
  background-color: #28a745;
  color: white;
}

.cancel-btn {
  background-color: #dc3545;
  color: white;
  margin-left: 10px;
}
.get-merch-btn {
  background-color: #28a745;   /* Green */
  color: white;
  border: none;
  padding: 14px 60px;          /* Increase horizontal padding */
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
  transition: background-color 0.3s ease;
  display: inline-block;
  min-width: 300px;            /* Force a longer button */
  text-align: center;
}

.get-merch-btn:hover {
  background-color: #218838;   /* Darker green on hover */
}
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px); /* classy blur */
}

.modal-content {
  background: #ffffff;
  margin: 8% auto;
  padding: 35px;
  border-radius: 14px;
  width: 380px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  animation: slideUp 0.4s ease-out;
}

.modal-content h3 {
  font-size: 22px;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 18px;
}

.modal-content p {
  font-size: 15px;
  color: #4a5568;
  margin-bottom: 14px;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.options button {
  padding: 12px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 15px;
  transition: all 0.25s ease-in-out;
}

.options button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.options button:nth-child(1) {
  background: linear-gradient(135deg, #48a442, #3b7f36);
  color: #fff;
}

.options button:nth-child(2) {
  background: linear-gradient(135deg, #003087, #001c54);
  color: #fff;
}

.options button:nth-child(3) {
  background: linear-gradient(135deg, #6b46c1, #553c9a);
  color: #fff;
}

.close {
  float: right;
  font-size: 24px;
  font-weight: bold;
  color: #a0aec0;
  cursor: pointer;
}

.close:hover {
  color: #2d3748;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}




/* ========================================== */
/* COPY AND PASTE THIS ENTIRE BLOCK TO THE BOTTOM OF YOUR CSS FILE */
/* ========================================== */

/* 1. Forces the merchandise grid layout to stretch completely across the viewport */
.inventory-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Locks your clean 3-column rows */
    gap: 30px !important;
    width: 100% !important;
    max-width: 95% !important; /* CHANGED FROM 1200px: Opens up the grid boundaries horizontally */
    margin: 30px auto !important;
    box-sizing: border-box !important;
}

/* 2. Allows individual merchandise cards to balloon outward to fill the columns */
.merch-card {
    background-color: #ffffff !important;
    border: 1px solid #dddddd !important;
    border-radius: 8px !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    
    /* REMOVES RIGID WIDTH CEILINGS */
    width: 100% !important;
    max-width: 100% !important; 
}
/* Optional: Makes the card pop up slightly when a user hovers over it */
.merch-card:hover {
    transform: translateY(-5px);       /* Moves the card up slightly */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Deepens the shadow on hover */
}

.merch-card img {
    width: 100% !important;
    max-width: 280px !important; /* Increased from 160px to give it a larger container */
    height: 280px !important;    /* Increased from 160px to match the width scale */
    object-fit: contain !important;
    margin-bottom: 16px;
    border-radius: 8px;
}



/* Clean typography properties for text blocks */
.inventory-title {
    color: #000000 !important;
    font-family: sans-serif;
    margin-bottom: 5px;
}

.inventory-desc {
    font-family: sans-serif;
    color: #555555;
    margin-bottom: 25px;
}

.merch-name {
    font-family: sans-serif;
    font-size: 16px;
    margin: 4px 0;
}

.merch-price {
    font-family: sans-serif;
    font-size: 15px;
    color: #000000;
}

.donation-container, 
.donation-grid-wrapper,
.gi-cards-stack { 
    display: grid !important; 
    grid-template-columns: repeat(4, 1fr) !important; /* Locks 4 side-by-side columns */ 
    gap: 24px !important; 
    width: 100% !important; 
    max-width: 95% !important; /* CHANGED FROM 1200px: Expands the row fluidly near the screen edges */
    margin: 40px auto !important; 
    box-sizing: border-box !important;
} 

/* 2. Individual Card Box Shapes */
.donation-card { 
    background-color: #ffffff !important;
    border: 1px solid #dddddd !important;
    border-radius: 8px !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Forces green button down perfectly */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
    min-height: 320px !important; 
    box-sizing: border-box !important;
} 

/* 3. Card Headings */ 
.donation-card h3 { 
    font-size: 1.1rem !important; 
    margin: 0 0 12px 0 !important; 
    color: #111111 !important; 
} 

/* 4. Description Sentences Layout */
.donation-card p { 
    font-size: 0.9rem !important; 
    color: #555555 !important; 
    line-height: 1.5 !important; 
    margin: 0 0 20px 0 !important; 
    flex-grow: 1 !important; /* Keeps empty spaces balanced uniformally */
} 

/* 5. Currency Action Buttons */ 
.donation-btn { 
    width: 100% !important;
    background-color: #2e7d32 !important; 
    color: #ffffff !important; 
    border: none !important; 
    padding: 12px 0 !important; 
    font-weight: bold !important; 
    border-radius: 4px !important; 
    cursor: pointer !important; 
    text-align: center !important; 
    font-size: 0.95rem !important; 
    transition: background-color 0.2s ease !important;
} 

.donation-btn:hover { 
    background-color: #1b5e20 !important; /* Smooth dark green layout shift */
} 

/* 6. Distinguishable Alternative Controls */ 
.custom-btn { 
    background-color: #f5f5f5 !important; 
    color: #333333 !important; 
    border: 1px solid #999999 !important; 
} 

.donation-amount { 
    margin-top: 15px !important; 
    font-weight: bold !important; 
    color: #2e7d32 !important; 
    font-size: 0.95rem !important; 
}

/* 2. Unlocks individual card horizontal width ceilings */
.donation-card,
.donation-container > div,
.gi-cards-stack > div { 
    background-color: #ffffff !important;
    border: 1px solid #dddddd !important;
    border-radius: 8px !important;
    padding: 28px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) !important;
    min-height: 320px !important; 
    box-sizing: border-box !important;
    
    /* CRITICAL FIX: Removes rigid width caps so cards expand evenly */
    max-width: 100% !important; 
    width: 100% !important; 
}

/* 3. Typography Adjustments */
.donation-card h3, div > h3 { 
    font-size: 1.1rem !important; 
    margin: 0 0 12px 0 !important; 
    color: #111111 !important; 
    white-space: normal !important; /* Forces title text to wrap to the next line cleanly */
} 

.donation-card p, div > p { 
    font-size: 0.9rem !important; 
    color: #555555 !important; 
    line-height: 1.5 !important; 
    margin: 0 0 20px 0 !important; 
    flex-grow: 1 !important; 
} 

/* 4. Action Buttons Stretch */
.donation-btn, div > button { 
    width: 100% !important;
    background-color: #2e7d32 !important; 
    color: white !important; 
    border: none !important; 
    padding: 12px 0 !important; 
    font-weight: bold !important; 
    border-radius: 4px !important; 
    cursor: pointer !important; 
}

/* Overriding layout rules to force full width block display */
.bucket-list-banner {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    box-sizing: border-box !important;
    background-color: #f4fbf7; 
    border-left: 5px solid #2e7d32; 
    padding: 24px 30px;
    margin: 35px 0;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Force text block elements inside to stretch and take normal alignment widths */
.bucket-content {
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px;
}

.bucket-content h3 {
    margin: 5px 0 10px 0;
    color: #111111;
    font-size: 1.4rem;
    line-height: 1.3;
}

.bucket-content p {
    margin: 0;
    color: #555555;
    font-size: 1rem;
    line-height: 1.6;
}

/* Make button display neatly underneath the unwrapped text */
.download-btn {
    display: inline-flex !important;
    background-color: #2e7d32;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 4px;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease-in-out;
}

.download-btn:hover {
    background-color: #1b5e20;
}

/* Keeps the retained intro sentences wide and left-aligned */
.gi-section-intro {
    width: 100%;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 8px;
}

.gi-section-intro .gi-box-title {
    font-size: 20px;
    color: #000000;
    font-weight: bold;
    margin-bottom: 6px;
}

.gi-section-intro .gi-box-text {
    font-size: 15px;
    color: #333333;
    line-height: 1.5;
}

/* Forces the payment row to span the full page layout and divide evenly */
.payment-grid {
    display: flex !important;
    justify-content: space-between !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 16px !important;
}

/* Forces each payment card box to expand horizontally */
.payment-card {
    background-color: #ffffff !important;
    border: 1px solid #767676 !important; /* Form input outline match */
    border-radius: 4px !important;        /* Form input corner radius match */
    padding: 24px !important;
    box-sizing: border-box !important;
    
    /* This makes both boxes exactly equal width (50% space split) */
    flex: 1 !important; 
    width: 100% !important;
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    text-align: left !important;
    min-height: 180px !important;
}

/* Prevents the text headings from breaking awkwardly into single letters */
.payment-title {
    display: block !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #000000 !important;
    margin: 0 0 8px 0 !important;
    white-space: nowrap !important;
}

/* --- Brand Backgrounds and Borders for Payment Cards --- */

/* M-Pesa Card: Official Safaricom Green Tint Background & Solid Border */
.mpesa-card {
    background-color: #f1f9f1 !important; /* Soft, light M-Pesa green tint */
    border: 2px solid #4baf4f !important;  /* Vibrant M-Pesa green outline border */
}

/* PayPal Card: Official Deep Blue Tint Background & Solid Border */
.paypal-card {
    background-color: #f2f6fa !important; /* Soft, light PayPal blue tint */
    border: 2px solid #003087 !important;  /* Vibrant PayPal deep blue outline border */
}

/* Base styles for the titles inside the branded boxes */
.mpesa-card .payment-title {
    color: #2e7d32 !important; /* Darker green for readability against light background */
}

.paypal-card .payment-title {
    color: #003087 !important; /* Crisp PayPal blue title text */
}

/* Button Customizations */
.paypal-btn-brand {
    display: inline-block !important;
    background-color: #003087 !important; /* Solid PayPal blue button background */
    color: #ffffff !important;            /* Clean white text */
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: bold !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    text-align: center !important;
    margin-top: 12px !important;
}

.paypal-btn-brand:hover {
    background-color: #001c4f !important; /* Dark blue hover state */
}

/* Centered Action Button with balanced width */
.get-merch-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 14px 60px;          /* Widen button by changing 35px/40px to 60px padding */
    font-size: 1.1rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap !important;
    
    /* Centering rules */
    display: block !important;    /* Changes button behavior to a structural block block */
    margin: 40px auto !important; /* Forces equal margins on left/right to lock it in the center */
    width: max-content !important;
}


.get-merch-btn:hover {
    background-color: #218838;
    transform: translateY(-1px);
}

/* Hidden Modal Overlay */
.modal-overlay {
    display: none; 
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

/* Modal Box Design */
.modal-content {
    background: white;
    padding: 30px;
    border-radius: 8px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    font-family: sans-serif;
}

.modal-content h3 {
    margin-top: 0;
    color: #333;
    border-bottom: 2px solid #28a745;
    padding-bottom: 10px;
}

.modal-content label {
    display: block;
    margin: 15px 0 5px;
    font-weight: bold;
    color: #555;
}

.modal-content input, .modal-content select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Cleaned up layout to place buttons side-by-side perfectly */
.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 25px;
    justify-content: flex-end; /* Pushes both buttons neatly to the right side */
    width: 100%;
}

/* Style settings for both buttons to make them uniform and eliminate text cropping */
.modal-actions button,
.modal-actions input[type="submit"] {
    flex: 1;                     /* Makes both buttons the exact same equal width */
    padding: 12px 20px;          /* Adds perfect internal breathing room around text */
    font-size: 0.95rem;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    text-align: center;
    transition: background-color 0.2s ease;
}

/* Submit Button - Balanced interactive corporate green */
.modal-actions button[type="submit"],
.modal-actions .submit-btn {
    background-color: #28a745;
    color: #ffffff;
}

.modal-actions button[type="submit"]:hover,
.modal-actions .submit-btn:hover {
    background-color: #218838;   /* Darkens slightly on mouse cursor hover */
}

/* Cancel Button - Clean modern neutral grey */
.modal-actions button.cancel-btn,
.modal-actions button:not([type="submit"]):last-of-type {
    background-color: #f1f3f5;   /* Matte light gray background */
    color: #495057;              /* Soft dark gray text for high contrast readability */
    border: 1px solid #ced4da;   /* Sleek, soft outer contour line */
}

.modal-actions button.cancel-btn:hover,
.modal-actions button:not([type="submit"]):last-of-type:hover {
    background-color: #e2e6ea;   /* Slightly darker grey layout tint on hover focus */
    color: #212529;
}

.modal-content {
  background-color: #fff;
  margin: 5% auto; /* Centers it vertically with some breathing room */
  padding: 20px;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  box-sizing: border-box;
  
  /* CRITICAL FIXES FOR SCROLLING */
  max-height: 85vh;    /* Prevents the modal from exceeding 85% of screen height */
  overflow-y: auto;    /* Automatically adds a vertical scrollbar if content is too long */
}

/* Update your existing wrapper to force 100% width availability */
#donationFormWrapper {
  width: 100%;
  box-sizing: border-box;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  
  /* Keeps layout fully responsive on small mobile displays */
  max-height: 60vh;
  overflow-y: auto;
}


/* Ensure the form element itself spans across the entire wrapper width */
#donationForm {
  width: 100%;
  display: block;
}

/* Update your existing input selector to safely include sizing metrics */
input, textarea {
  width: 100%;
  box-sizing: border-box; /* CRITICAL: prevents horizontal scrollbars */
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}


.btn.confirm {
  background: #34495e;
  color: #fff;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
}
.btn.confirm:hover {
  background: #2c3e50;
}
/* Mobile Smartphone Viewports Optimization (Fixed Classes) */
@media (max-width: 600px) {
  
  /* 1. DISMANTLES THE ROW LAYOUT: Forces the actual wrapper to stack items straight down */
  .donation-package-container,
  .inventory-container {
    display: flex !important;
    flex-direction: column !important; /* Forces vertical column stack alignment */
    flex-wrap: wrap !important;
    align-items: center !important;    /* Centers every card nicely on the smartphone screen */
    gap: 25px !important;              /* Adds rich vertical breathing room between your stacked cards */
    width: 100% !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  /* 2. FORCES ALL CHILD CARDS TO SNAP INWARD SAFELY: No more clipping or sliding off screen edges */
  .donation-card,
  .donation-package-container > div,
  .inventory-container > div {
    width: 100% !important;
    max-width: 320px !important;   /* Locks card width size cleanly inside the phone frame walls */
    flex: none !important;         /* CRITICAL FIX: Overrides desktop flex rules and stops squishing */
    flex-grow: 0 !important;       /* Resets any underlying dynamic desktop flex stretching multipliers */
    margin: 0 auto 15px auto !important;
    padding: 24px 20px !important; /* Uniform interior padding padding inside individual boxes */
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 3. Action Buttons: stretch full width inside the card boundaries safely */
  .donation-card button,
  .donation-package-container button,
  .gi-card-btn,
  .donation-btn {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
  }

  /* 4. Text and Header scaling adjustments */
  .gi-header-section h2, 
  .donation-card h4,
  .inventory-title {
    font-size: 22px !important;
    text-align: center !important;
  }

  .gi-header-section p,
  .donation-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    padding: 0 5px !important;
  }
}